 <template>
    <div>
        <el-row>
            <!--检索-->
            <el-form :inline="true" :model="search" class="demo-form-inline">
                <el-input v-if="false" v-model="search.pageNum"></el-input>
                <el-input v-if="false" v-model="search.pageSize"></el-input>
                <el-col :span="4">
                    <el-input v-model="search.name" placeholder="请输入门店名称"></el-input>
                </el-col>
                <el-col :span="4"
                    ><div>
                        <el-input v-model="search.address" placeholder="请输入地址"></el-input></div
                ></el-col>
                <el-col :span="12"
                    ><div>
                        <el-button type="primary" icon="el-icon-search" @click="searchBtn">搜索</el-button>
                        <el-button type="info" icon="el-icon-loading" @click="emptyBtn">刷新</el-button>
                    </div>
                </el-col></el-form
            >
            <el-button type="primary" @click="addBtn" icon="el-icon-circle-plus">新增</el-button>
            <!--功能列表-->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="index" label="#" sortable> </el-table-column>
                <el-table-column prop="name" label="门店名称"> </el-table-column>
                <el-table-column prop="address" label="门店地址"> </el-table-column>
                <el-table-column prop="addtime" label="添加时间"> </el-table-column>
                <el-table-column prop="ishot" label="是否是常用门店" :formatter="getStatusName"></el-table-column>
                <el-table-column label="操作" width="300px">
                    <template slot-scope="scope">
                        <el-button size="small" @click="updateRole(scope.$index, scope.row)" icon="el-icon-edit" type="success"
                            >编辑</el-button
                        >
                        <el-button size="small" @click="deleteRole(scope.$index, scope.row)" icon="el-icon-delete" type="danger"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <!--分页功能-->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageNum"
                :page-sizes="[1, 2, 3, 5, 10, 20, 100]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
            >
            </el-pagination>
            <!--新增/修改 Form -->
            <el-dialog title="门店管理" :visible.sync="editRoleState">
                <el-form :model="form">
                    <el-form-item label="门店名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" placeholder="门店名称" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="选择地址" :label-width="formLabelWidth">
                        <el-select v-model="form.provinceId" placeholder="请选择省" @change="getpro()">
                            <el-option v-for="pro in provinces" :key="pro.baseAreaid" :label="pro.name" :value="pro.baseAreaid">
                            </el-option>
                        </el-select>
                        <el-select v-model="form.cityId" placeholder="请选择市" @change="getcity()">
                            <el-option v-for="city in citys" :key="city.baseAreaid" :label="city.name" :value="city.baseAreaid">
                            </el-option>
                        </el-select>
                        <el-select v-model="form.areaId" placeholder="请选择县" @change="getarea()">
                            <el-option v-for="area in areas" :key="area.baseAreaid" :label="area.name" :value="area.baseAreaid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="详细地址" :label-width="formLabelWidth">
                        <el-input v-model="form.address" placeholder="门店地址" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="常用门店" :label-width="formLabelWidth">
                        <el-radio v-model="form.ishot" label="0">否</el-radio>
                        <el-radio v-model="form.ishot" label="1">是</el-radio>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editRoleState = false">取 消</el-button>
                    <el-button type="primary" @click="saveRole">确 定</el-button>
                </div>
            </el-dialog>
        </el-row>
    </div>
</template>

<script>
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios, axios);

export default {
    data() {
        return {
            tableData: [],
            powerData: [],
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            page: {},
            form: { provinceId: '', cityId: '', areaId: '', ishot: '1' },
            powerform: {},
            search: { pageNum: 1, pageSize: 5 },
            formLabelWidth: '80px',
            editRoleState: false,
            provinces: [],
            citys: [],
            areas: [],
            parentid: 0
        };
    },
    created: function () {
        var _this = this;
        _this.$http
            .post('http://localhost:9999/crs/baseArea/selectAll', {
                parentid: this.parentid
            })
            .then((response) => {
                console.log('返回值' + response.data);
                _this.provinces = response.data;
            });
        this.load();
        this.getpro();
        this.getcity();
        this.getarea();
    },
    methods: {
        //改变省份
        getpro: function () {
            var _this = this;
            this.$http
                .post('http://localhost:9999/crs/baseArea/selectAll', {
                    parentid: this.form.provinceId
                })
                .then((response) => {
                    _this.citys = response.data;
                    _this.addAddress();
                });
        },
        //改变市
        getcity() {
            this.$http
                .post('http://localhost:9999/crs/baseArea/selectAll', {
                    parentid: this.form.cityId
                })
                .then((response) => {
                    console.log('返回值' + response.data);
                    this.areas = response.data;
                    this.addAddress();
                });
        },
        //改变县
        getarea() {
            this.addAddress();
        },
        //地址
        addAddress() {
            let proobj = {};
            proobj = this.provinces.find((pro) => {
                //model就是上面的数据源
                return pro.baseAreaid === this.form.provinceId; //筛选出匹配数据
            });
            var proname = proobj.name;
            proname = proname != '' ? proname : '';
            let cityobj = {};
            cityobj = this.citys.find((city) => {
                return city.baseAreaid === this.form.cityId; //筛选出匹配数据
            });
            var cityname = cityobj.name;
            cityname = cityname != '' ? cityname : '';
            let areaobj = {};
            areaobj = this.areas.find((area) => {
                return area.baseAreaid === this.form.areaId; //筛选出匹配数据
            });
            var areayname = areaobj.name;
            areayname = areayname != '' ? areayname : '';
            this.form.address = proname + cityname + areayname;
        },
        //初始化数据
        load() {
            var _this = this;
            //页面初始化时，加载的方法
            this.$http
                .get('http://localhost:9999/crs/shop/queryAllByParam', {
                    params: {
                        pageNo: this.search.pageNum,
                        pageSize: this.search.pageSize,
                        name: this.search.name,
                        address: this.search.address
                    }
                })
                .then((response) => {
                    console.log(response.data);
                    _this.tableData = response.data.data.list;
                    _this.page = response.data.data;
                    _this.total = response.data.data.total;
                });
        },
        //每页显示数量发生变化
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.search.pageSize = val;
            this.load();
        },
        //第几页发生变化
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.search.pageNum = val;
            this.load();
        },
        //查询
        searchBtn() {
            console.log(`当前页`);
            this.load();
        },
        emptyBtn() {
            this.search = {};
            this.search.pageNum = 1;
            this.search.pageSize = 5;
            this.load();
        },
        getStatusName(row, column, cellValue) {
            return cellValue == 1 ? '是' : '否';
        },
        updateRole: function (index, row) {
            console.log('当前行数据：' + row);
            this.form = row;
            this.editRoleState = true;
        },
        deleteRole: function (index, row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    var _this = this;
                    axios
                        .delete('http://192.168.1.72:9999/crs/shop/deleteById?id=' + row.id)
                        .then(function (response) {
                            if (response.status == 200) {
                                //提示成功
                                _this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                //重新加载数据
                                _this.load();
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                            _this.$message.error('你错了。。。');
                        });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        saveRole() {
            var _this = this;
            if (this.form.id != null && this.form.id != '' && this.form.id != undefined) {
                axios
                    .put('http://localhost:9999/crs/shop/update', this.form)
                    .then(function (response) {
                        //正确请求时，回调函数
                        console.log(response);
                        //提示成功
                        _this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                        _this.load();
                        _this.editRoleState = false;
                    })
                    .catch(function (error) {
                        _this.$message.error('你错了。。。');
                        _this.editRoleState = false;
                        _this.load();
                        //失败处理
                        console.log(error);
                    });
            } else {
                axios
                    .post('http://localhost:9999/crs/shop/insert', this.form)
                    .then(function (response) {
                        //提示成功
                        _this.$message({
                            type: 'success',
                            message: '新增成功!'
                        });
                        //正确请求时，回调函数
                        console.log(response);
                        _this.load();
                        _this.editRoleState = false;
                        _this.form = {};
                    })
                    .catch(function (error) {
                        _this.$message.error('你错了。。。');
                        //失败处理
                        console.log(error);
                    });
            }
        },
        addBtn() {
            this.form = {};
            this.editRoleState = true;
        }
    }
};
</script>
<style>
</style>